<template>
  <div class="list-group">
    <a
        href="#"
        class="list-group-item list-group-item-action flex-column align-items-start"
        v-for="task in tasks"
        :key="task.id">
      <input
          type="checkbox"
          :checked="task.completed">
      <div class="col-md-11 d-flex w-100 justify-content-between"
           :class="{'text-muted': task.completed}">
        <h5 class="mb-1">{{ task.title }}</h5>
        <small>{{ task.createdAt }}</small>
      </div>
      <small>{{ task.content }}</small>

    </a>
  </div>
</template>

<script>
export default {
  name: 'Todoitem',
  props: {
    tasks: Array
  }
}
</script>
